<template>
  <view class="my-box">
    <image src="/static/img-bg.png" class="bg-image"></image>
    <view class="head-sculpture-box"><image src="/static/img-头像.png" mode="widthFix"></image></view>
    <text class="user-name">{{ userList.name }}</text>
    <text class="user-info">司机编号：{{ userList.number }}</text>
    <text class="user-info">手机号：{{ userList.phone }}</text>
    <view class="bottom-box">
      <!-- month-task -->
      <view class="info-box">
        <text class="month-task">- 本月任务 -</text>
        <view class="task-info">
          <view class="task-info-list">
            <text class="top-text">{{mouthTask.taskAmounts || 0}}</text>
            <text class="bottom-text">任务总量</text>
          </view>
          <view class="task-info-list">
            <text class="top-text">{{ mouthTask.completedAmounts || 0 }}</text>
            <text class="bottom-text">完成任务量</text>
          </view>
          <view class="task-info-list">
            <text class="top-text">{{ mouthTask.transportMileage || 0 }}</text>
            <text class="bottom-text">运输里程(km)</text>
          </view>
        </view>
      </view>
      <view class="info-box">
        <u-cell-group >
          <u-cell title="车辆信息" :isLink="true" titleStyle="color: #2A2929;font-size: 16px;letter-spacing: 0.18px;font-weight: 400;"></u-cell>
          <u-cell title="任务数据" :isLink="true" titleStyle="color: #2A2929;font-size: 16px;letter-spacing: 0.18px;font-weight: 400;"></u-cell>
          <u-cell title="系统设置" :isLink="true" titleStyle="color: #2A2929;font-size: 16px;letter-spacing: 0.18px;font-weight: 400;"></u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      userList: {},
      mouthTask:{}
    };
  },
  created() {},
  mounted() {},
  onLoad() {
    this.getUser();
    this.getMouth()
  },
  methods: {
    async getUser() {
      const {data: { data }} = await uni.$http.get('/users');
      // console.log(data);
      this.userList = data;
    },
    async getMouth(){
      let nowDate = new Date();
      let nowYear = nowDate.getFullYear()
      let nowMouth = nowDate.getMonth() + 1
      const {data:{data}} = await uni.$http.get('/users/taskReport',{
        year:nowYear,
        month:nowMouth
      })
      this.mouthTask = data
    }
  }
};
</script>

<style lang="scss">
page {
  position: fixed;
  z-index: -2;
  background-color: #f4f4f4;
}
.my-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  .bg-image {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 294px;
  }
  .head-sculpture-box {
    width: 66px;
    height: 66px;
    margin: 8px;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .user-name {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0.21px;
    text-align: center;
    margin-bottom: 8px;
  }
  .user-info {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0.16px;
    margin-bottom: 4px;
  }
  .bottom-box {
    padding-left: 14.5px;
    padding-right: 14.5px;
  }
  .info-box {
    width: 93vw;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    .month-task {
      text-align: center;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #818181;
      letter-spacing: 0.16px;
      margin-top: 14px;
    }
    .task-info {
      display: flex;
      width: 100%;
      justify-content: space-evenly;
      .task-info-list {
        display: flex;
        height: 100px;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .top-text {
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 18px;
          color: #2a2929;
          letter-spacing: 0.21px;
        }
        .bottom-text {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 12px;
          color: #2a2929;
          letter-spacing: 0.14px;
        }
      }
    }
  }
}
</style>
